import React, { useState, useEffect } from 'react';
import { Modal, Row, Col, Tag, Skeleton } from 'antd';
import moment from 'moment';
import { ScaleBar } from '../../components';
import BurnoutChart from './BurnoutChart';
import { fetchVersionInfo } from '../service';
import { getQualityTag, getHour, toVersionReleaseFlag, toPercent, formatTip } from '../../utils';
import styles from './index.less';

const Detail = ({ id, visible, ...restProps }) => {
    const [loading, setLoading] = useState(true);
    const [data, setData] = useState({});

    // 拉取数据
    const fetchData = async () => {
        setLoading(true);

        const { data: resData, code } = await fetchVersionInfo({ id });
        if (code === 10000) {
            setData(resData);
        }
        setLoading(false);
    };
    useEffect(() => {
        fetchData();
    }, [id]);

    const { workloadHistory, workloadStandard } = data; // 工作历史记录
    const workloadHistoryLast = workloadHistory && workloadHistory[workloadHistory.length - 1]; // 取最后一条数据

    const rt = getQualityTag(data.evalRank);

    // 图表计算
    // 任务总数:逾期未达成+正常达成+逾期达成
    const taskTotal = data.overdueTaskNum + data.normalDoneTaskNum + data.overdueDoneTaskNum;

    // 总工作量:已完成工作量+进行中+待完成
    const workTimeTotal = data.actualDoneWorkloadNum + data.workloadExecutingNum + data.workloadNonexecutionNum;

    // 任务百分比计算
    const taskPercent = {
        overdueTaskPer: toPercent(data.overdueTaskNum, taskTotal),
        normalDoneTaskPer: toPercent(data.normalDoneTaskNum, taskTotal),
        overdueDoneTaskPer: toPercent(data.overdueDoneTaskNum, taskTotal)
    };
    // 工作量百分比计算
    const workPercent = {
        actualDoneWorkloadPer: toPercent(data.actualDoneWorkloadNum, workTimeTotal),
        workloadExecutingPer: toPercent(data.workloadExecutingNum, workTimeTotal),
        workloadNonexecutionPer: toPercent(data.workloadNonexecutionNum, workTimeTotal)
    };

    // 燃尽图数据
    const burnoutDetail = { actualData: [], shouldData: [] };
    if (workloadHistory) {
        workloadHistory.forEach(item => {
            burnoutDetail.actualData.push(getHour(item.planWorkloadNum - item.actualDoneWorkloadNum)); // 实际线数据
        });
    }
    // 转换成小时
    if (workloadStandard) {
        workloadStandard.forEach(item => {
            burnoutDetail.shouldData.push(getHour(item)); // 参考线数据
        });
    }
    return (
        <Modal
            visible={visible}
            footer={null}
            {...restProps}
            onCancel={restProps.onClose}
            width={740}
            title={data.versionNo && ` 版本：${data.versionNo}`}
            bodyStyle={{ height: data.versionNo ? 500 : 200, overflowY: 'auto' }}
            destroyOnClose
        >
            <Skeleton loading={loading} active>
                <div className={styles.header}>
                    <Row gutter={8} className={styles.row}>
                        <Col span={3}>产品线：</Col>
                        <Col span={5}>{data.productName || '--'}</Col>
                        <Col span={3}>项目组：</Col>
                        <Col span={11}>{data.projectGroupName || '--'}</Col>
                    </Row>
                    <Row gutter={8}>
                        <Col span={3}>产品经理：</Col>
                        <Col span={5}>{data.productManagerName || '--'}</Col>
                        <Col span={3}>研发组长：</Col>
                        <Col span={5}>{data.developManagerName || '--'}</Col>
                        <Col span={3}>参与人数：</Col>
                        <Col span={5}>{data.performeTaskNum ? `${data.performeTaskNum} 人` : '--'}</Col>
                    </Row>
                </div>
                <Row gutter={8} className={styles.row}>
                    <Col span={3}>版本状态：</Col>
                    <Col span={5}>{toVersionReleaseFlag(data.releaseFlag)}</Col>
                    <Col span={3}>进度情况：</Col>
                    <Col span={11}>
                        {data.status === '0' && <span className={styles.normalTag}>正常</span>}
                        {data.status === '1' && <span className={styles.InsTag}>逾期</span>}
                    </Col>
                </Row>
                <Row gutter={8} className={styles.row}>
                    <Col span={3}>开始时间：</Col>
                    <Col span={5}>
                        {data.versionStartDate ? moment(data.versionStartDate).format('YYYY-MM-DD') : '--'}
                    </Col>
                    <Col span={3}>计划上线：</Col>
                    <Col span={5}>{data.planOnlineDate ? moment(data.planOnlineDate).format('YYYY-MM-DD') : '--'}</Col>
                    <Col span={3}>实际上线：</Col>
                    <Col span={5}>
                        {data.actualOnlineDate ? moment(data.actualOnlineDate).format('YYYY-MM-DD') : '--'}
                    </Col>
                </Row>
                <Row gutter={8} className={styles.row}>
                    <Col span={3}>任务：</Col>
                    <Col span={5}>
                        {data.normalDoingTaskNum +
                            data.normalDoneTaskNum +
                            data.overdueDoneTaskNum +
                            data.overdueTaskNum +
                            data.overdueWarnTaskNum}
                        个
                    </Col>
                    <Col span={3}>工作量：</Col>
                    <Col span={11}>{getHour(data.planWorkloadNum)}小时</Col>
                </Row>
                <Row gutter={8} className={styles.row}>
                    <Col>
                        <ScaleBar
                            scaleData={[
                                {
                                    text: `已完成 ${getHour(data.actualDoneWorkloadNum)} 小时，${
                                        workPercent.actualDoneWorkloadPer
                                    }`,
                                    style: { backgroundColor: '#FFA22D', width: workPercent.actualDoneWorkloadPer },
                                    tip: formatTip(
                                        '已完成',
                                        getHour(data.actualDoneWorkloadNum),
                                        workPercent.actualDoneWorkloadPer,
                                        '小时'
                                    ),
                                    link: '/stat/workStat/workOverview/work/task?taskStatus=完成',
                                    hide: Number(data.actualDoneWorkloadNum) === 0
                                },
                                {
                                    text: `进行中 ${getHour(data.workloadExecutingNum)} 小时，${
                                        workPercent.workloadExecutingPer
                                    }`,
                                    style: {
                                        backgroundColor: '#FFC53D',
                                        width: workPercent.workloadExecutingPer
                                    },
                                    tip: formatTip(
                                        '进行中',
                                        getHour(data.workloadExecutingNum),
                                        workPercent.workloadExecutingPer,
                                        '小时'
                                    ),
                                    link: '/stat/workStat/workOverview/work/task?taskStatus=处理中',
                                    hide: Number(data.workloadExecutingNum) === 0
                                },
                                {
                                    text: `待执行 ${getHour(data.workloadNonexecutionNum)} 小时，${
                                        workPercent.workloadNonexecutionPer
                                    }`,
                                    style: {
                                        backgroundColor: '#FFD666',
                                        width: workPercent.workloadNonexecutionPer
                                    },
                                    tip: formatTip(
                                        '待执行',
                                        getHour(data.workloadNonexecutionNum),
                                        workPercent.workloadNonexecutionPer,
                                        '小时'
                                    ),
                                    link: '/stat/workStat/workOverview/work/task?taskStatus=待办',
                                    hide: Number(data.workloadNonexecutionNum) === 0
                                }
                            ]}
                        />
                    </Col>
                </Row>
                <Row gutter={8} className={styles.row}>
                    <Col>
                        <ScaleBar
                            scaleData={[
                                {
                                    text: `正常达成 ${data.normalDoneTaskNum} 个，${taskPercent.normalDoneTaskPer}`,
                                    style: { backgroundColor: '#40A9FF', width: taskPercent.normalDoneTaskPer },
                                    tip: formatTip(
                                        '正常达成',
                                        data.normalDoneTaskNum,
                                        taskPercent.normalDoneTaskPer,
                                        '个'
                                    ),
                                    link: '/stat/workStat/workOverview/work/task?taskCompleteStatus=正常',
                                    hide: Number(data.normalDoneTaskNum) === 0
                                },
                                {
                                    text: `逾期达成 ${data.overdueDoneTaskNum} 个，${taskPercent.overdueDoneTaskPer}`,
                                    style: {
                                        backgroundColor: '#69C0FF',
                                        width: taskPercent.overdueDoneTaskPer
                                    },
                                    tip: formatTip(
                                        '逾期达成',
                                        data.overdueDoneTaskNum,
                                        taskPercent.overdueDoneTaskPer,
                                        '个'
                                    ),
                                    link: '/stat/workStat/workOverview/work/task?taskCompleteStatus=逾期',
                                    hide: Number(data.overdueDoneTaskNum) === 0
                                },
                                {
                                    text: `逾期未达成 ${data.overdueTaskNum} 个，${taskPercent.overdueTaskPer}`,
                                    style: {
                                        backgroundColor: '#91D5FF',
                                        width: taskPercent.overdueTaskPer
                                    },
                                    tip: formatTip('逾期未达成', data.overdueTaskNum, taskPercent.overdueTaskPer, '个'),
                                    link: '/stat/workStat/workOverview/work/task?taskCompleteStatus=逾期',
                                    hide: Number(data.overdueTaskNum) === 0
                                }
                            ]}
                        />
                    </Col>
                </Row>
                <Row gutter={8}>
                    <Col span={24}>燃尽图：</Col>
                </Row>
                <div style={{ textAlign: 'center' }}>
                    总工作量：
                    <span style={{ marginRight: 10 }}>
                        {getHour(workloadHistoryLast && workloadHistoryLast.planWorkloadNum)} 小时
                    </span>
                    已完成：
                    <span style={{ marginRight: 10 }}>
                        {getHour(workloadHistoryLast && workloadHistoryLast.actualDoneWorkloadNum)} 小时
                    </span>
                    剩余工作：
                    <span>
                        {workloadHistoryLast &&
                            getHour(workloadHistoryLast.planWorkloadNum - workloadHistoryLast.actualDoneWorkloadNum)}
                        小时
                    </span>
                </div>
                <Row gutter={8} className={styles.row}>
                    <Col>
                        <BurnoutChart data={burnoutDetail} />
                    </Col>
                </Row>
                <Row gutter={8}>
                    <Col span={3}>任务质量：</Col>
                    <Col span={5}>
                        <span style={{ marginRight: 5 }}>{data.evalScore && data.evalScore.toFixed(2)}分</span>
                        <Tag color={rt.color}>{rt.label}</Tag>
                    </Col>
                    <Col span={3}>人均BUG：</Col>
                    <Col span={5}>{data.perCapitaBugNum ? `${data.perCapitaBugNum} 个` : '--'}</Col>
                    <Col span={3}>bug总数：</Col>
                    <Col span={5}>{data.totalBugNum ? `${data.totalBugNum} 个` : '--'}</Col>
                </Row>
            </Skeleton>
        </Modal>
    );
};

export default Detail;
